<template>
	<view class=" flex_ZC">
		<!-- #ifdef H5 -->
			<uNavbar title="入驻福叠猫"> </uNavbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<image class="indexbg" :src="baseUrl +'/static/image/indexbg.png'" mode="aspectFill"></image>
		<view class="custom_box">
			<view :style="{height: statusBarHeight + 'px', backgroundColor: backgroundColor }"></view>
			<view class="custom_nav " :style="{height: titleHeight + 'px', backgroundColor: backgroundColor}">
				<image class="goback" :src="baseUrl +'/static/icon/i_left.png'" mode="aspectFill" @click="leftClick">
				</image>
				<text class="f28 c3">入驻福叠猫</text>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<view class="information_txt flex_Zc">
			<text class="f48 c3 fw7">填写资料</text>
			<view class="tips flex_ld" v-if="tipShow">
				<view class="tips_box flex_dq">
					<u-icon name="error-circle" color="#FA6E01" size="12"></u-icon>
					<text class="tip_txt">以下信息需与实际经营一致，如有错误请修改</text>
				</view>
				<u-icon name="close" color="#333333" size="14" @click="tipShow = false "></u-icon>
			</view>

			<view class="content flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">门店名称</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">需要与门店招牌上的名称一致，最多50个字</text>
				<u--input placeholder="请输入门店名称" fontSize="14" color="#666666" border="none "
					v-model.trim="joinDetails.name" clearable></u--input>
			</view>
			<view class="content flex_Z" v-if="!modifyState">
				<view class="flex_dq">
					<text class="f28 c3 fw5">门店类型</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">不同门店类型所需证照不同</text>
				<view class="store_type flex_dq">
					<text :class="item.id == ids?'active2':''" v-for="(item,index) in storeType" :key="item.id"
						@click="changeType(item.id)">{{item.name}}</text>
				</view>
			</view>
			<view class="content flex_Z" v-if="modifyState">
				<view class="flex_dq">
					<text class="f28 c3 fw5">门店类型</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">不同门店类型所需证照不同</text>
				<view class="store_type flex_dq">
					<text class="active2">{{ids==1?'个体工商户':'企业'}}</text>
				</view>
			</view>
			<view class="content flex_Z" v-if="false">
				<view class="flex_dq">
					<text class="f28 c3 fw5">支付机构</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">请选择不同支付机构</text>
				<view class="store_type flex_dq">
					<text :class="item.id == payid?'active2':''" v-for="(item,index) in payTypeList" :key="item.id"
						@click="changeJg(item.id)">{{item.name}}</text>
				</view>
			</view>
			<view class="content flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">所在地区</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">需要与门店经营地址一致</text>
				<view class="xuanze flex_ld" @click="openAddress">
					<text :class=" areaState?'active':'change_state'">{{addressAll}}</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="content flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">详细地址</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">门店地址需要与门店实际经营地址一致</text>
				<u--input placeholder="请输入详细地址" fontSize="14" color="#666666" border="none "
					v-model.trim="joinDetails.address" clearable></u--input>
			</view>
			<view class="content flex_Z" @click="openFenlei">
				<view class="flex_dq">
					<text class="f28 c3 fw5">门店分类</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">需要与门店经营地址一致</text>
				<view class="xuanze flex_ld">
					<text :class=" categoryState?'active':'change_state'">{{classificationInfo}}</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>

			<view class="content flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">门店照片 </text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">请拍摄门店招牌图、店内环境图各一张</text>
				<view class="xuanze flex_dq">
					<view class="uploads flex_c">
						<u-upload :fileList="fileList1" @afterRead="afterRead($event,'zpt',)"
							@delete="deletePic($event,'zpt',)" name="1" :maxCount="1" :maxSize="6 *1024 *1024"
							@oversize="overSize">
							<view class=" flex_ZC">
								<image class="uploadimg" :src="baseUrl +'/static/icon/addimg.png'" mode="aspectFill">
								</image>
								<text class="f20 c9">门店招牌图</text>
							</view>
						</u-upload>
					</view>
					<view class="uploads flex_c">
						<u-upload :fileList="fileList2" @afterRead="afterRead($event,'hjt',)"
							@delete="deletePic($event,'hjt',)" name="2" :maxCount="1" :maxSize="6 *1024 *1024"
							@oversize="overSize">
							<view class=" flex_ZC">
								<image class="uploadimg" :src="baseUrl +'/static/icon/addimg.png'" mode="aspectFill">
								</image>
								<text class="f20 c9">店内环境图</text>
							</view>
						</u-upload>
					</view>

					<view class="uploads flex_c">
						<u-upload :fileList="fileList3" @afterRead="afterRead($event,'syt',)"
							@delete="deletePic($event,'syt',)" name="3" :maxCount="1" :maxSize="6 *1024 *1024"
							@oversize="overSize">
							<view class=" flex_ZC">
								<image class="uploadimg" :src="baseUrl +'/static/icon/addimg.png'" mode="aspectFill">
								</image>
								<text class="f20 c9">收银台图</text>
							</view>
						</u-upload>
					</view>
				</view>
			</view>

			<view class="content flex_Z" @click="clickMap">
				<view class="flex_ld">
					<view class="">
						<text class="f28 c3 fw5">地图位置</text>
						<text class="tishi"> *</text>
					</view>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
				<text class="content_tip">位置有误直接影响顾客到店，请仔细确认</text>
				<view class="xuanze flex_ld">
					<view class="maps">
						<map style="width: 100%; height: 200rpx;" :enable-zoom="false" :enable-scroll="false"
							:longitude="longitude" :latitude="latitude"></map>
					</view>
				</view>
			</view>

			<view class="btns flex_ld" v-if="!modifyState">
				<text class="sign_out" @click="leftClick">上一步</text>
				<text class="service" @click="$u.debounce(nextStep, 300)">下一步</text>
			</view>

			<view class="btns flex_ld" v-else>
				<text class="service2" @click="confirmModify">确认修改</text>
			</view>
		</view>
		<view class="empty3"></view>
		<view class="ceshi">
			<atAddress ref="scroll" :level="4"  @change='chooseSuccess'></atAddress>
			<classification ref="bdfl" @change='backFenlei'></classification>
		</view>
	</view>
</template>

<script>
	import {
		commonArea,
		categoryList
	} from "../../api/other.js"
	import {
		settledOneSave,
		settledDetails,
		infoEdit
	} from "../../api/join.js"

	import {
		baseURL
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,

				ids: 1, //门店类型
				payid:1, //支付机构
				sellerId: '',
				latitude: '',
				longitude: '',
				halfZpt: '', //半路经招牌图
				halfHjt: '', //半路经环境图
				halfSyt: '', //半路经环境图
				sideDetail: '', //招牌/环境
				addressAll: '请选择所在区域', //合并地址
				classificationInfo: '请选择门店分类', //选取分类汇总
				fileList1: [],
				fileList2: [],
				fileList3: [],
				storeType: [{
					id: 1,
					name: '个体工商户'
				}, {
					id: 2,
					name: '企业'
				}],
				payTypeList: [{
					id: 1,
					name: '汇付支付'
				}, 
				{
					id: 2,
					name: '拉卡拉支付'
				},
				],
				tipShow: true,
				areaState: false, //是否选择地区
				categoryState: false, //是否选择地区
				modifyState: false, //是否通过修改按钮进入
				joinDetails: {
					id: ''
				},
			}
		},

		onReady() {
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
					console.log(this.statusBarHeight);
				}
			})
			const custombar = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (custombar.top - this.statusBarHeight) * 2 + custombar.height
			console.log(this.titleHeight);
			// #endif

		},
		onLoad(e) {
			console.log(e);
			this.modifyState = e.modify
			console.log(this.modifyState);
			this.applicationDetails()
		},
		onShow() {
			if (uni.getStorageSync('sellerId')) {
				this.sellerId = uni.getStorageSync('sellerId')
				console.log(111111111, this.sellerId);
			}
		},

		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 门店类型 
			changeType(id) {
				this.ids = id
			},
			// 选择支付机构
			changeJg(id) {
				this.payid = id
			},
			// 截取半路经
			getPathAfterCom(url) {
				const parts = url.split('.com');
				return parts.length > 1 ? parts[1] : '';
			},

			// 入驻申请详情
			applicationDetails() {
				settledDetails().then(res => {
					console.log(res);
					if (res.code == 1) {
						if (res.data.id) {
							this.joinDetails = res.data
							this.areaState = true
							this.addressAll = res.data.full_address
							this.categoryState = true
							this.classificationInfo = res.data.category_data
							this.latitude = res.data.latitude
							this.longitude = res.data.longitude
							this.ids = res.data.company_type
							this.payid = res.data.pay_type
							this.sellerId = res.data.id
							this.fileList1.push({
								'thumb': res.data.hostImg,
								'status': 'success'
							})
							this.fileList2.push({
								'thumb': res.data.withinImg[0],
								'status': 'success'
							})
							this.fileList3.push({
								'thumb': res.data.cashier_image,
								'status': 'success'
							})
							this.halfZpt = this.getPathAfterCom(res.data.hostImg)
							this.halfHjt = this.getPathAfterCom(res.data.withinImg[0])
							this.halfSyt = this.getPathAfterCom(res.data.cashier_image)
						}
					}
				})
			},
			//打开地址选择器
			openAddress() {
				// console.log(this.$refs.scroll.)
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.addressAll = ''
				this.areaState = true
				let value = e.value;
				this.joinDetails.province_id = e.value[0].id
				this.joinDetails.city_id = e.value[1].id
				this.joinDetails.county_id = e.value[2].id
				this.joinDetails.street_id = e.value[3].id

				for (let i = 0; i < value.length; i++) {
					if (this.addressAll != value[i].name) {
						if (value[i].name != '县') {
							this.addressAll += value[i].name
						}
					}
				}
				console.log(this.addressAll);
			},

			//打开本地生活分类
			openFenlei() {
				this.$refs.bdfl.open()
			},
			// 本地生活分类
			backFenlei(e) {
				console.log('本地生活分类:', e)
				this.classificationInfo = ''
				this.categoryState = true
				let value = e.value;
				this.joinDetails.classify_id = e.value.classify_id
				this.classificationInfo = e.value.nameInfo.join(' ')
				console.log(this.classificationInfo);
			},
			// 确认修改
			confirmModify() {
				if (this.ruleValidation()) {
					let data = {
						seller_id: this.joinDetails.id,
						name: this.joinDetails.name,
						address: this.joinDetails.address,
						province_id: this.joinDetails.province_id,
						city_id: this.joinDetails.city_id,
						county_id: this.joinDetails.county_id,
						street_id: this.joinDetails.street_id,
						classify_id: this.joinDetails.classify_id,
						cover: this.halfZpt,
						detail_images: this.halfHjt,
						cashier_image: this.halfSyt,
						longitude: this.joinDetails.longitude,
						latitude: this.joinDetails.latitude,
						company_type: this.ids,
						pay_type:this.payid
					};
					console.log(data);
					infoEdit(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.$u.toast('修改成功，正在审核');
							setTimeout(function() {
								uni.navigateBack({
									delta: 2
								})
							}, 1500);
						}
					})
				}
			},
			// 超出提示
			overSize(event) {
				// console.log(event);
				uni.$u.toast('图片过大,请重新上传!')
			},
			// 删除图片
			deletePic(event, side) {
				console.log(event, side);
				this[`fileList${event.name}`].splice(event.index, 1);
				if (side == 'zpt') {
					this.halfZpt = ''
				} else if (side == 'hjt') {
					this.halfHjt = ''
				} else {
					this.halfSyt = ''
				}
			},
			// 新增图片
			async afterRead(event, side) {
				console.log(event);
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.sideDetail = side
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen, 1, Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
				uni.hideLoading();
			},
			uploadFilePromise(url) {
				console.log(url);
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseURL + `localSeller/common/upload`,
						filePath: url,
						name: 'file',
						header: {
							"ba-user-token": uni.getStorageSync("token") || ''
						},
						success: (res) => {
							console.log(JSON.parse(res.data))
							let datainfo = JSON.parse(res.data);
							if (datainfo.code == 1) {
								setTimeout(() => {
									resolve(res.data.data);
								}, 1000);
								if (this.sideDetail == 'zpt') {
									this.halfZpt = datainfo.data.url
								} else if (this.sideDetail == 'hjt') {
									this.halfHjt = datainfo.data.url
								} else {
									this.halfSyt = datainfo.data.url
								}
							} else {
								uni.$u.toast(datainfo.msg);
								if (this.sideDetail == 'zpt') {
									this.fileList1 = []
								} else if (this.sideDetail == 'hjt') {
									this.fileList2 = []
								} else {
									this.fileList3 = []
								}
							}
						}
					});
				});
			},

			// 打开地图选点
			clickMap() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res,'resssssss');
						
						 // #ifdef MP-WEIXIN || H5
						if (res.errMsg === 'chooseLocation:ok') {
							// console.log(res);
							
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							this.latitude = res.latitude
							this.longitude = res.longitude
						
							this.joinDetails.latitude = res.latitude
							this.joinDetails.longitude = res.longitude
						}
						 // #endif
						 // #ifdef MP-ALIPAY
						 this.latitude = res.latitude
						 this.longitude = res.longitude
						 						 
						 this.joinDetails.latitude = res.latitude
						 this.joinDetails.longitude = res.longitude
						  // #endif
						 
						
					},
					fail(err) {
						console.log(err,'errrrrrr');
					}
				});
			},

			// 规则校验
			ruleValidation() {
				if (uni.$u.test.isEmpty(this.joinDetails.name)) {
					uni.$u.toast('请输入门店名称');
					return false;
				}
				if (uni.$u.test.isEmpty(this.joinDetails.address)) {
					uni.$u.toast('请输入详情地址');
					return false;
				}
				if (uni.$u.test.isEmpty(this.joinDetails.province_id)) {
					uni.$u.toast('请选择所在地区');
					return false;
				}
				if (uni.$u.test.isEmpty(this.joinDetails.classify_id)) {
					uni.$u.toast('请选择门店分类');
					return false;
				}
				if (this.fileList1.length <= 0) {
					uni.$u.toast('请上传门店招牌图');
					return false;
				}
				if (this.fileList2.length <= 0) {
					uni.$u.toast('请上传门店店内环境图');
					return false;
				}
				if (this.fileList3.length <= 0) {
					uni.$u.toast('请上传门收银台图');
					return false;
				}
				if (uni.$u.test.isEmpty(this.joinDetails.longitude)) {
					uni.$u.toast('请选择地图位置');
					return false;
				}
				return true;
			},
			// 下一步
			nextStep() {
				if (this.ruleValidation()) {
					let data = {
						seller_id: this.sellerId,
						name: this.joinDetails.name,
						address: this.joinDetails.address,
						province_id: this.joinDetails.province_id,
						city_id: this.joinDetails.city_id,
						county_id: this.joinDetails.county_id,
						street_id: this.joinDetails.street_id,
						classify_id: this.joinDetails.classify_id,
						cover: this.halfZpt,
						detail_images: this.halfHjt,
						cashier_image: this.halfSyt,
						longitude: this.joinDetails.longitude,
						latitude: this.joinDetails.latitude,
						company_type: this.ids,
						pay_type: this.payid,
						mask: 1
					};
					console.log(data);
					settledOneSave(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.setStorageSync('sellerId', res.data.id)
							uni.navigateTo({
								url: '/pagesMy/businessJoin/certificatesCenter'
							})
						}
					})
				}
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 260rpx;
		z-index: 7;
	}

	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;
	}

	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.information_txt {
		position: relative;
		width: 686rpx;
		padding: 16rpx 0;
		z-index: 8;
	}

	.tips {
		width: 100%;
		height: 62rpx;
		background: #FFF5EE;
		border-radius: 14rpx;
		margin: 48rpx 0 16rpx;
	}

	.tip_txt {
		font-size: 20rpx;
		color: #FA6E01;
		margin-left: 10rpx;
	}

	.content {
		position: relative;
		width: 100%;
		padding: 32rpx 0 10rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		z-index: 8;
	}

	.content_tip {
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0 20rpx;
	}

	.xuanze {
		padding: 10rpx 0 20rpx;
	}

	.change_state {
		font-size: 28rpx;
		color: #c0c4cc;
	}

	.active {
		font-size: 28rpx;
		color: #666666 !important;
	}

	.tishi {
		font-size: 28rpx;
		color: #FA6E01;
		margin-left: 6rpx;
	}

	.store_type {
		width: 100%;
	}

	.store_type>text {
		width: 164rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #FFCC28;
		font-size: 24rpx;
		color: #FFCC28;
		margin-right: 20rpx;
	}

	.active2 {
		width: 164rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: #FFCC28;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-size: 24rpx;
		color: #333333 !important;
	}

	.uploads {
		width: 202rpx;
		height: 202rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.uploadimg {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 16rpx;
	}

	.maps {
		width: 686rpx;
		height: 202rpx;
		background: #D8D8D8;
		border-radius: 8rpx;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
		z-index: 10;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.service2 {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.ceshi {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/deep/.u-input__content {
		margin-left: -20rpx;
	}

	/deep/.u-upload__deletable {
		height: 24px !important;
		width: 24px !important;
	}

	/deep/.u-icon__icon {
		font-size: 30rpx !important;
		line-height: 30rpx !important;
	}
	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field{
		background: transparent!important;
	}
	/* #endif */
</style>